<template>
  <div class="wrap">
    <div class="banner"></div>
    <jigou></jigou>
    <Charm :charmList="data.charmList"></Charm>
    <About></About>
    <ppp :pppList="data.pppList"></ppp>
  </div>
</template>

<script lang="ts" setup>
import Title from "@/components/Title.vue";
import jigou from "./components/jigou.vue";
import Charm from "./components/charm.vue";
import About from "./components/about.vue";
import ppp from "./components/ppp.vue";

import { reactive, onMounted } from "vue";

import { getPPP } from "@/api";

const data = reactive({
  charmList: [] as any,
  pppList: [] as any,
});

onMounted(() => {
  getPPP().then((res) => {
    const { POSITION_ITEM_01, POSITION_ITEM_02 }:any  = res;
    data.charmList = POSITION_ITEM_01;
    data.pppList = POSITION_ITEM_02;
  });
});
</script>

<style scoped>
.banner {
  min-width: 1440px;
  height: 0;
  padding-bottom: 30.2%;
  background: url('https://img.cctvch.cn/uploads/fbfb0f7d02c071d2c2d8f06e7584bf59.png');
  background-size: 100% 100%;
}
</style>
